<template>
	<view>
		<view class="container">
     <!-- 正文内容 -->  
	   <view class="content"> 
		   <view   v-for="(item,index) in dataList" :key="index">
		   <view class="item">
				 <view class="item-top">
						<view class="item-top-left">
							{{item.serialnumber}}
						</view>
						<view class="item-top-right">
						   •••
						</view>
				 </view>
				 <view class="item-content">
					  <view class="item-content-item">
						  产品类型(DeviceType)：{{item.devicetype}}
					  </view>
					  <view class="item-content-item">
						  <view class="item-content-item-left">客户(Client):</view>
						  <view class="item-content-item-right">
							  {{item.customername}}
						  </view>
					  </view>
					  <view class="item-content-item">
						  <view class="item-content-item-left">时间(Time):</view>
						  <view class="item-content-item-right">
							  {{item.deliverytime}}
						  </view>
					  </view>
				 </view>
				 <view class="item-btn" @click="showItem(item.binddeviceid)">
						<view class="item-btn-left">查看详情(View Details)</view>
						<u-icon name="arrow-right" class="item-btn-right"></u-icon>
				 </view>
			 </view>
		  </view>	
			 <!--   数据 为空时  -->
			<template v-if="empty==0">
				<u-empty
					textSize = '15'
					mode = "data"
					icon = "https://cdnjson.com/images/2023/10/17/cbbd3de693b44e84afe2593f449acbb6.png"
				>
				</u-empty>
			</template>
			 
		</view>		 
		</view>
		
		
	</view>

</template>

<script>
export default {
	data() {
		return {
			dataList:[],  
			empty: 0,
			openid: '',
		};
	},
	onLoad() {
		this.openid = uni.getStorageSync('clientOpenid')
		console.log(this.openid,'----------------缓存中的openid------------')
		this.dataList = [];
		uni.request({
			url: 'https://www.smacaftersales.com:443/bindDevice/bindDevice/findBindDeviceByOpenid',
			method: 'GET',
			data:{ openid: this.openid},
			success: (res) => {
				console.log(res,"------- 数据 ------")
				if (res.data.data.length != 0) {
					this.empty = 1
					for (var i = 0; i < res.data.data.length; i++) {
						this.dataList.push(res.data.data[i])
					}
				} else{
					this.empty = 0 
				}	
			}
		})
	},
	methods:{
	  showItem(binddeviceid){
		  console.log("查看详情 ",binddeviceid)
		  let data = { binddeviceid: binddeviceid}
		  uni.navigateTo({
		  	url: '/pages/clientVue/myDeviceInfo?data='+encodeURIComponent(JSON.stringify(data))
		  })
	  }
	},
	onUnload() {
		console.log("---- 监听页面卸载---")
		uni.switchTab({
			url: '/pages/clientVue/my-client'
		})
	},
	onPullDownRefresh(){
		uni.request({
			url: 'https://www.smacaftersales.com:443/bindDevice/bindDevice/findBindDeviceByOpenid',
			method: 'GET',
			data:{ openid: this.openid},
			success: (res) => {
				if (res.data.data.length != 0) {
					this.empty = 1
					for (var i = 0; i < res.data.data.length; i++) {
						this.dataList.push(res.data.data[i])
					}
				} else{
					this.empty = 0 
				}
			}
		})
		uni.stopPullDownRefresh() // 终止刷新 
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
.container{
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		.slot-wrap{
			display: flex;
			align-items: center;
			flex: 1;
			.search-wrap{
				margin: 0 20rpx;
				flex: 1;
			}
		}
		.content{
			flex:1;
			.item{
				height: 380rpx;
				margin-left: 49rpx;
				margin-top:15rpx;
				margin-right:49rpx;
				border-radius: 15rpx;
				background-color:#FFFF;
				.item-top{
					padding-left: 52rpx;
					padding-right: 52rpx;
					padding-top: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item-top-left{
						font-size: 44rpx;
					}
					.item-top-right {
						font-size: 44rpx;
					}
				}
				.item-content{
					height: 200rpx;
					border-bottom:1rpx solid #e8e8e8 ;
					background-color: #FFFFFF;
					.item-content-item{
						color: #777777;
						padding-left: 52rpx;
						padding-top: 20rpx;
						font-size:32rpx ;
						display:flex;
						flex-direction: row;
						.item-content-item-left{
							color:#8b8b8b;
							padding-right: 35rpx;
						}
						.item-content-item-right{
							color:#1b286e;
						}
					}
					
				}
				.item-btn{
					height: 30rpx;
					font-size: 36rpx;
					padding-top: 20rpx;
					padding-left: 52rpx;
					background-color: #FFFFFF;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item-btn-right{
						width: 20px;
						height: 20px;
						margin-right: 50rpx;
						color:#e8e8e8;
					}
				}
			}
		}
	}

	 
	 	
</style>